<template>
    <div>
        <section class="container">
            <!-- 左容器 -->
            <section class="itemLeft">
                <ItemPage>
                    <template #main>
                        <ItemOne />
                    </template>
                </ItemPage>
                <ItemPage>
                    <template #main>
                        <ItemTwo></ItemTwo>
                    </template>
                </ItemPage>
            </section>

            <!-- 右容器 -->
            <section class="itemRight">
                <ItemPage>
                    <template #main>
                        <ItemThree></ItemThree>
                    </template>
                </ItemPage>
                <ItemPage>
                    <template #main>
                        <ItemFour></ItemFour>
                    </template>
                </ItemPage>
            </section>
        </section>
    </div>
</template>

<script setup lang="ts">
import ItemPage from '../../components/ItemPage.vue'
import ItemOne from '../../components/ItemOne.vue'
import ItemTwo from '../../components/ItemTwo.vue'
import ItemThree from '../../components/ItemThree.vue'
import ItemFour from '../../components/ItemFour.vue'
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    margin: 0 auto;
    // background-color: gray;
    display: flex;
    // min-width: 14.84rem;

    .itemLeft,
    .itemRight {
        flex: 1;
    }
}
</style>